<template>
  <div class="real-time-status">
    <div class="page-header">
      <h1>电梯实时状态</h1>
      <div class="header-actions">
        <t-select
          v-model="buildingFilter"
          style="width: 150px; margin-right: 16px"
          placeholder="选择楼栋"
          clearable
          @change="handleFilterChange"
        >
          <t-option value="" label="全部楼栋" />
          <t-option value="1号楼" label="1号楼" />
          <t-option value="2号楼" label="2号楼" />
          <t-option value="3号楼" label="3号楼" />
        </t-select>
        <t-select
          v-model="statusFilter"
          style="width: 150px; margin-right: 16px"
          placeholder="运行状态"
          clearable
          @change="handleFilterChange"
        >
          <t-option value="" label="全部状态" />
          <t-option value="运行中" label="运行中" />
          <t-option value="停止" label="停止" />
          <t-option value="维修中" label="维修中" />
          <t-option value="故障" label="故障" />
        </t-select>
        <t-input
          v-model="searchText"
          placeholder="搜索电梯"
          style="width: 200px"
          clearable
        >
          <template #suffix-icon>
            <t-icon name="search" @click="onSearch" />
          </template>
        </t-input>
      </div>
    </div>

    <t-row :gutter="16">
      <t-col :span="8">
        <t-card title="电梯列表" bordered>
          <t-list :split="true" size="small">
            <t-list-item
              v-for="lift in filteredLifts"
              :key="lift.id"
              @click="selectLift(lift)"
              :class="{ 'active-lift': currentLift && currentLift.id === lift.id }"
            >
              <template #header>
                <div class="lift-item-header">
                  <span class="lift-name">{{ lift.name }}</span>
                  <t-tag :theme="getStatusTheme(lift.status)" variant="light">
                    {{ lift.status }}
                  </t-tag>
                </div>
              </template>
              <template #default>
                <div class="lift-item-content">
                  <div class="lift-info">
                    <div class="info-item">
                      <t-icon name="location" />
                      <span>{{ lift.building }}</span>
                    </div>
                    <div class="info-item">
                      <t-icon name="layers" />
                      <span>{{ lift.floors }}层</span>
                    </div>
                  </div>
                  <div class="lift-status">
                    <div class="info-item">
                      <t-icon name="user-circle" />
                      <span>{{ lift.currentLoad }}人</span>
                    </div>
                    <div class="info-item">
                      <t-icon name="arrow-up" v-if="lift.direction === '上行'" />
                      <t-icon name="arrow-down" v-else-if="lift.direction === '下行'" />
                      <t-icon name="minus-rectangle" v-else />
                      <span>{{ lift.direction }}</span>
                    </div>
                  </div>
                </div>
              </template>
            </t-list-item>
          </t-list>
        </t-card>
      </t-col>
      <t-col :span="16">
        <t-card title="电梯实时监控" bordered>
          <template #actions>
            <t-radio-group v-model="viewMode">
              <t-radio-button value="status">状态信息</t-radio-button>
              <t-radio-button value="visual">可视化</t-radio-button>
              <t-radio-button value="data">数据分析</t-radio-button>
            </t-radio-group>
          </template>

          <div v-if="!currentLift" class="no-lift-selected">
            <t-empty description="请从左侧列表选择电梯查看详情" />
          </div>

          <div v-else>
            <!-- 状态信息视图 -->
            <div v-if="viewMode === 'status'" class="status-view">
              <t-row :gutter="[16, 16]">
                <t-col :span="12">
                  <t-card title="基本信息" :bordered="true" class="inner-card">
                    <t-descriptions :column="1">
                      <t-descriptions-item label="电梯编号">{{ currentLift.id }}</t-descriptions-item>
                      <t-descriptions-item label="电梯名称">{{ currentLift.name }}</t-descriptions-item>
                      <t-descriptions-item label="所在楼栋">{{ currentLift.building }}</t-descriptions-item>
                      <t-descriptions-item label="服务楼层">{{ currentLift.floors }}层</t-descriptions-item>
                      <t-descriptions-item label="电梯类型">{{ currentLift.type }}</t-descriptions-item>
                      <t-descriptions-item label="额定载重">{{ currentLift.maxLoad }}kg ({{ currentLift.maxPeople }}人)</t-descriptions-item>
                    </t-descriptions>
                  </t-card>
                </t-col>
                <t-col :span="12">
                  <t-card title="运行状态" :bordered="true" class="inner-card">
                    <t-descriptions :column="1">
                      <t-descriptions-item label="当前状态">
                        <t-tag :theme="getStatusTheme(currentLift.status)" variant="light">
                          {{ currentLift.status }}
                        </t-tag>
                      </t-descriptions-item>
                      <t-descriptions-item label="运行方向">
                        <span>
                          <t-icon name="arrow-up" v-if="currentLift.direction === '上行'" />
                          <t-icon name="arrow-down" v-else-if="currentLift.direction === '下行'" />
                          <t-icon name="minus-rectangle" v-else />
                          {{ currentLift.direction }}
                        </span>
                      </t-descriptions-item>
                      <t-descriptions-item label="当前楼层">{{ currentLift.currentFloor }}层</t-descriptions-item>
                      <t-descriptions-item label="当前载重">{{ currentLift.currentLoad }}人 ({{ currentLift.currentLoadKg }}kg)</t-descriptions-item>
                      <t-descriptions-item label="运行速度">{{ currentLift.speed }}m/s</t-descriptions-item>
                      <t-descriptions-item label="门状态">{{ currentLift.doorStatus }}</t-descriptions-item>
                    </t-descriptions>
                  </t-card>
                </t-col>
                <t-col :span="24">
                  <t-card title="实时数据" :bordered="true" class="inner-card">
                    <t-row :gutter="16">
                      <t-col :span="8">
                        <div class="data-card">
                          <div class="data-title">载重比例</div>
                          <t-progress
                            :percentage="Math.round((currentLift.currentLoadKg / currentLift.maxLoad) * 100)"
                            :color="getLoadColor(Math.round((currentLift.currentLoadKg / currentLift.maxLoad) * 100))"
                          />
                        </div>
                      </t-col>
                      <t-col :span="8">
                        <div class="data-card">
                          <div class="data-title">运行时间</div>
                          <div class="data-value">{{ currentLift.runningTime }}小时</div>
                        </div>
                      </t-col>
                      <t-col :span="8">
                        <div class="data-card">
                          <div class="data-title">今日运行次数</div>
                          <div class="data-value">{{ currentLift.todayTrips }}次</div>
                        </div>
                      </t-col>
                    </t-row>
                  </t-card>
                </t-col>
              </t-row>
            </div>

            <!-- 可视化视图 -->
            <div v-else-if="viewMode === 'visual'" class="visual-view">
              <div class="elevator-visual">
                <div class="building-wrapper">
                  <div class="floor-labels">
                    <div v-for="floor in getFloorArray()" :key="floor" class="floor-label">
                      {{ floor }}F
                    </div>
                  </div>
                  <div class="elevator-shaft">
                    <div 
                      class="elevator-car" 
                      :style="{ 
                        bottom: `${getElevatorPosition()}%`,
                        backgroundColor: currentLift.status === '故障' ? '#e34d59' : 
                                        currentLift.status === '维修中' ? '#ed7b2f' : '#0052d9'
                      }"
                    >
                      <div class="elevator-info">
                        <div>{{ currentLift.currentFloor }}F</div>
                        <div>{{ currentLift.currentLoad }}人</div>
                        <div>
                          <t-icon name="arrow-up" v-if="currentLift.direction === '上行'" />
                          <t-icon name="arrow-down" v-else-if="currentLift.direction === '下行'" />
                          <t-icon name="minus-rectangle" v-else />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="elevator-status">
                  <h3>电梯状态</h3>
                  <div class="status-items">
                    <div class="status-item">
                      <span class="label">楼层:</span>
                      <span class="value">{{ currentLift.currentFloor }}F</span>
                    </div>
                    <div class="status-item">
                      <span class="label">方向:</span>
                      <span class="value">{{ currentLift.direction }}</span>
                    </div>
                    <div class="status-item">
                      <span class="label">载重:</span>
                      <span class="value">{{ currentLift.currentLoadKg }}kg</span>
                    </div>
                    <div class="status-item">
                      <span class="label">速度:</span>
                      <span class="value">{{ currentLift.speed }}m/s</span>
                    </div>
                    <div class="status-item">
                      <span class="label">门状态:</span>
                      <span class="value">{{ currentLift.doorStatus }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 数据分析视图 -->
            <div v-else class="data-view">
              <t-row :gutter="[16, 16]">
                <t-col :span="24">
                  <t-card title="运行数据趋势" :bordered="true" class="inner-card">
                    <div class="chart-placeholder">
                      <p>此处可集成图表组件展示电梯运行数据趋势</p>
                    </div>
                  </t-card>
                </t-col>
                <t-col :span="12">
                  <t-card title="使用频率分析" :bordered="true" class="inner-card">
                    <div class="chart-placeholder">
                      <p>此处可集成图表组件展示电梯使用频率分析</p>
                    </div>
                  </t-card>
                </t-col>
                <t-col :span="12">
                  <t-card title="能耗分析" :bordered="true" class="inner-card">
                    <div class="chart-placeholder">
                      <p>此处可集成图表组件展示电梯能耗分析</p>
                    </div>
                  </t-card>
                </t-col>
              </t-row>
            </div>
          </div>
        </t-card>
      </t-col>
    </t-row>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';

// 电梯数据
const lifts = ref([
  {
    id: 'L001',
    name: '1号楼A电梯',
    building: '1号楼',
    floors: 20,
    type: '乘客电梯',
    maxLoad: 1000,
    maxPeople: 13,
    status: '运行中',
    direction: '上行',
    currentFloor: 8,
    currentLoad: 5,
    currentLoadKg: 375,
    speed: 1.5,
    doorStatus: '关闭',
    runningTime: 1254,
    todayTrips: 127,
  },
  {
    id: 'L002',
    name: '1号楼B电梯',
    building: '1号楼',
    floors: 20,
    type: '乘客电梯',
    maxLoad: 1000,
    maxPeople: 13,
    status: '停止',
    direction: '停止',
    currentFloor: 1,
    currentLoad: 0,
    currentLoadKg: 0,
    speed: 0,
    doorStatus: '关闭',
    runningTime: 1187,
    todayTrips: 98,
  },
  {
    id: 'L003',
    name: '2号楼A电梯',
    building: '2号楼',
    floors: 18,
    type: '乘客电梯',
    maxLoad: 1200,
    maxPeople: 16,
    status: '运行中',
    direction: '下行',
    currentFloor: 12,
    currentLoad: 8,
    currentLoadKg: 600,
    speed: 1.5,
    doorStatus: '关闭',
    runningTime: 1432,
    todayTrips: 145,
  },
  {
    id: 'L004',
    name: '2号楼B电梯',
    building: '2号楼',
    floors: 18,
    type: '乘客电梯',
    maxLoad: 1200,
    maxPeople: 16,
    status: '维修中',
    direction: '停止',
    currentFloor: 1,
    currentLoad: 0,
    currentLoadKg: 0,
    speed: 0,
    doorStatus: '打开',
    runningTime: 1356,
    todayTrips: 0,
  },
  {
    id: 'L005',
    name: '3号楼电梯',
    building: '3号楼',
    floors: 15,
    type: '货运电梯',
    maxLoad: 2000,
    maxPeople: 20,
    status: '故障',
    direction: '停止',
    currentFloor: 5,
    currentLoad: 0,
    currentLoadKg: 0,
    speed: 0,
    doorStatus: '关闭',
    runningTime: 987,
    todayTrips: 45,
  },
]);

const buildingFilter = ref('');
const statusFilter = ref('');
const searchText = ref('');
const viewMode = ref('status');
const currentLift = ref(null);
let simulationInterval = null;

// 根据筛选条件过滤电梯
const filteredLifts = computed(() => {
  let result = [...lifts.value];
  
  // 按楼栋筛选
  if (buildingFilter.value) {
    result = result.filter(lift => lift.building === buildingFilter.value);
  }
  
  // 按状态筛选
  if (statusFilter.value) {
    result = result.filter(lift => lift.status === statusFilter.value);
  }
  
  // 按搜索文本筛选
  if (searchText.value) {
    const keyword = searchText.value.toLowerCase();
    result = result.filter(
      (lift) =>
        lift.name.toLowerCase().includes(keyword) ||
        lift.id.toLowerCase().includes(keyword) ||
        lift.building.toLowerCase().includes(keyword)
    );
  }
  
  return result;
});

// 获取状态对应的主题色
const getStatusTheme = (status) => {
  switch (status) {
    case '运行中': return 'success';
    case '停止': return 'default';
    case '维修中': return 'warning';
    case '故障': return 'danger';
    default: return 'default';
  }
};

// 获取载重对应的颜色
const getLoadColor = (percentage) => {
  if (percentage >= 90) return '#e34d59';
  if (percentage >= 70) return '#ed7b2f';
  return '#0052d9';
};

// 获取楼层数组
const getFloorArray = () => {
  if (!currentLift.value) return [];
  const floors = [];
  for (let i = 1; i <= currentLift.value.floors; i++) {
    floors.push(i);
  }
  return floors.reverse(); // 从高到低排列
};

// 获取电梯位置百分比
const getElevatorPosition = () => {
  if (!currentLift.value) return 0;
  const totalFloors = currentLift.value.floors;
  const currentFloor = currentLift.value.currentFloor;
  return ((currentFloor - 1) / (totalFloors - 1)) * 100;
};

// 筛选条件变化处理
const handleFilterChange = () => {
  // 筛选逻辑已通过计算属性实现
};

// 搜索处理
const onSearch = () => {
  // 搜索逻辑已通过计算属性实现
};

// 选择电梯
const selectLift = (lift) => {
  currentLift.value = { ...lift };
};

// 模拟电梯运行
const startSimulation = () => {
  simulationInterval = setInterval(() => {
    lifts.value.forEach(lift => {
      // 只模拟运行中的电梯
      if (lift.status === '运行中') {
        // 模拟电梯移动
        if (lift.direction === '上行') {
          lift.currentFloor = Math.min(lift.currentFloor + 1, lift.floors);
          if (lift.currentFloor === lift.floors) {
            lift.direction = '下行';
          }
        } else if (lift.direction === '下行') {
          lift.currentFloor = Math.max(lift.currentFloor - 1, 1);
          if (lift.currentFloor === 1) {
            lift.direction = '上行';
          }
        }
        
        // 模拟载客量变化
        const randomChange = Math.floor(Math.random() * 3) - 1; // -1, 0, 1
        lift.currentLoad = Math.max(0, Math.min(lift.maxPeople, lift.currentLoad + randomChange));
        lift.currentLoadKg = lift.currentLoad * 75; // 假设每人75kg
        
        // 更新当前选中的电梯
        if (currentLift.value && currentLift.value.id === lift.id) {
          currentLift.value = { ...lift };
        }
      }
    });
  }, 3000);
};

// 生命周期钩子
onMounted(() => {
  // 默认选择第一个电梯
  if (lifts.value.length > 0) {
    currentLift.value = { ...lifts.value[0] };
  }
  
  // 启动模拟
  startSimulation();
});

onUnmounted(() => {
  // 清除定时器
  if (simulationInterval) {
    clearInterval(simulationInterval);
  }
});
</script>

<style scoped>
.real-time-status {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  align-items: center;
}

.lift-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.lift-name {
  font-weight: 500;
}

.lift-item-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.lift-info, .lift-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  font-size: 14px;
}

.active-lift {
  background-color: rgba(0, 82, 217, 0.05);
  border-left: 3px solid #0052d9;
}

.no-lift-selected {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.inner-card {
  height: 100%;
}

.data-card {
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 4px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.data-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.data-value {
  font-size: 24px;
  font-weight: 500;
  color: #0052d9;
}

.elevator-visual {
  display: flex;
  gap: 20px;
  height: 500px;
}

.building-wrapper {
  display: flex;
  height: 100%;
  width: 200px;
}

.floor-labels {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  width: 40px;
  height: 100%;
  padding: 10px 0;
}

.floor-label {
  text-align: center;
  font-size: 12px;
  color: #666;
}

.elevator-shaft {
  flex: 1;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  position: relative;
  height: 100%;
}

.elevator-car {
  position: absolute;
  left: 10%;
  width: 80%;
  height: 40px;
  background-color: #0052d9;
  border-radius: 4px;
  transition: bottom 1s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.elevator-info {
  color: white;
  display: flex;
  gap: 10px;
  font-size: 12px;
}

.elevator-status {
  flex: 1;
}

.status-items {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.label {
  color: #666;
}

.value {
  font-weight: 500;
}

.chart-placeholder {
  height: 300px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
</style> 